<template>
  <a-modal
    v-model="visible"
    width="50vw"
    :bodyStyle="{ padding: '10px 40px 10px 20px' }"
    title="配料信息维护"
    :confirmLoading="loading"    
    @ok="handleOk"
    @cancel="handleCancel"
  >      
    <div>
      <a-form-model ref="ruleForm" :model="dataForm" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="配料编号">
              <a-input v-model="dataForm.materialNoStr" disabled placeholder="自动生成"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="配料名称" prop="materialName">
              <a-input v-model="dataForm.materialName" allowClear placeholder="请输入"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="过敏原">
              <a-switch checked-children="是" un-checked-children="否"  v-model="dataForm.allergy" />
            </a-form-model-item>
          </a-col>
         
          <a-col :span="12" v-if="dataForm.allergy === true">
            <a-form-model-item label="过敏原分类" prop="allergyLevelArr">
              <a-select v-model="dataForm.allergyLevelArr" placeholder="请选择" mode="multiple">
                <a-select-option v-for="(item, index) in dict.allergyLevelOption" :key="'relate' +index" :value="item.value">
                  {{item.label}}
                </a-select-option>
              </a-select>                            
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
           <a-col :span="12">
            <a-form-model-item label="特殊气味">
              <a-switch checked-children="是" un-checked-children="否"  v-model="dataForm.smell" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="配料分组" prop="materialGroup">
              <a-select v-model="dataForm.materialGroup" placeholder="请选择" >
                <a-select-option v-for="(item, index) in dict.materialGroupOption" :key="'matGroup' +index" :value="Number(item.code)">
                  {{item.name}}
                </a-select-option>
              </a-select>                            
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="备注">
            <a-textarea
              v-model="dataForm.remark"
              :auto-size="{ minRows: 3, maxRows: 5 }"
              style="width: 100%"
              :maxLength="300"
              placeholder="请输入（300个字符以内）"
            />
          </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </a-modal> 
</template>
<script>
import {getAction,postAction} from '@/api/manage'
import {codeInfoList} from '@/api/codeInfo'
import { ClearLibMixin } from '@/mixins/ClearLibMixin'
export default {
  name: 'BurdenAddModal',
   mixins: [ClearLibMixin],
  props: {
  },
  data() {
    return {
      visible: false,
      dataForm: {allergyLevelArr:[]},
      rules: {
        materialName: [{ required: true, message: '请输入', trigger: 'blur' }],
        allergyLevelArr: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      loading: false,
      modalType: '', // add新增  upd修改
      url: {
        saveBurden: '/hteWashMaterial/save', // 新增
      },
      dict:{
         allergyLevelOption: [{value:'A类',label:'A类'},{value:'B类',label:'B类'},{value:'C类',label:'C类'},{value:'D类',label:'D类'}],
         materialGroupOption:[]
      }
    }
  },
  mounted() {
    this.initDics();
  },
  methods: {
    initDics(){
      codeInfoList({type:`${this.washType}配料分组`,pageSize:-1,isdel: 0}).then((res) => {
        if (res.code == 200) {
          this.dict.materialGroupOption = res.result.records
        } else {
          this.$message.warning('查询异常:' + res.message)
        }
      })
    },
    showVisible(record) {     
      if(record){        
        this.modalType = 'upd'
        this.dataForm = record
        this.$set(this.dataForm,'allergyLevelArr',this.dataForm.allergyLevel?this.dataForm.allergyLevel.split(","):[]); 
      }else{
        this.modalType = 'add'
      }
      this.$set(this.dataForm,'washType',this.washType); 
      this.visible = true            
    },
    handleCancel() {
      this.$emit('ok')
      this.visible = false
      this.dataForm = {}
      this.$refs.ruleForm.resetFields()
    },
    handleOk(){
      this.loading = true
      const that = this;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {                    
          that.dataForm.allergyLevel = that.dataForm.allergyLevelArr.join(",");
          postAction(this.url.saveBurden, this.dataForm).then(res => {
            if (res.success) {
              this.handleCancel()
              this.$message.success(`${this.modalType == 'add' ? '新增成功' : '修改成功'}`)
            } else {
              this.$message.error('操作失败:' + res.message)
            }
          })                                      
        }        
      })
      this.loading = false
    },
  },
}
</script>
<style lang="less" scoped>
  .mt20{margin-top: 20px;}
  .col-line{height: 40px;line-height: 40px;
    >span{margin-right: 15px;
      &:last-of-type{margin-right: 0;}
    }
  }
</style>
